<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../FormMaking.css">
</head>
<body>
  <div id="app">
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../FormMaking.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        jsonData: {"list":[{"type":"textarea","name":"多行文本","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"disabled":false,"pattern":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1582708113855"},"key":"1582708113855","model":"textarea_1582708113855","rules":[]},{"type":"table","name":"子表单","icon":"icon-table","tableColumns":[{"type":"input","name":"单行文本","icon":"icon-input","options":{"defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1582708121035","width":"200px","tableColumn":true},"novalid":{},"key":"1582708121035","model":"input_1582708121035","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"remoteFunc":"func_1582708122179"},"key":"1582708122179","model":"radio_1582708122179","rules":[]},{"type":"time","name":"时间选择器","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":true,"format":"HH:mm:ss","required":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1582708122754"},"key":"1582708122754","model":"time_1582708122754","rules":[]}],"options":{"defaultValue":[],"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"remoteFunc":"func_1582708117346"},"key":"1582708117346","model":"table_1582708117346","rules":[]},{"type":"input","name":"单行文本","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1582708118951"},"key":"1582708118951","model":"input_1582708118951","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
        editData: {},
        remoteFuncs: {
          
        }
      },
      methods: {
        handleSubmit () {
          this.$refs.generateForm.getData().then(data => {
            // 数据校验成功
            // data 为获取的表单数据
            alert(JSON.stringify(data))
          }).catch(e => {
            // 数据校验失败
          })
        }
      }
    })
  </script>
</body>
</html>